<template>
  <div class="attendances-container">
    <div class="app-container">
      <h2>
        考勤
      </h2>
      <button @click="$router.push('/import?name=attendances')">考勤导入</button>
      <hr>
      <!-- 需求: 默认显示按钮 点击按钮隐藏按钮 显示输入框而且输入框要自动获取焦点 -->
      <input v-if="flag" ref="iptRef" type="text"> <button v-else @click="showInput">按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Attendances',
  data() {
    return {
      flag: false
    }
  },
  // 数据发生了变化, dom结构还没有发生变化
  beforeUpdate() { },
  // dom更新完毕触发
  updated() {
    console.log(this.$refs.iptRef)
  },
  methods: {
    async showInput() {
      // 将flag设置为true
      this.flag = true
      console.log()
      // this.$nextTick(() => {
      //   this.$refs.iptRef.focus()
      // })
      await this.$nextTick()
      this.$refs.iptRef.focus()
    }
  }
}
</script>

<style>

</style>
